<template>
  <el-tree highlight-current :data="data" :props="props" :show-checkbox="checkBox" :default-checked-keys="defaultCheckedKeys" @check-change="handleCheckChange" @node-click="handleNodeClick"></el-tree>
</template>

<script>
export default {
  name: 'iTree',
  props: {
    data: {
      type: Array,
      required: true
    },
    props: {
      type: Object,
      required: false,
      default: {
        children: 'children',
        label: 'label'
      }
    },
    checkBox: {
      type: Boolean,
      required: false,
      default: false
    },
    defaultCheckedKeys: {
      type: Array,
      required: false
    }
  },
  methods: {
    handleNodeClick(data, node) {
      const _data = {
        data,
        node
      }
      this.$emit('handleNodeClick', _data)
    },
    handleCheckChange(data, checked, indeterminate) {
      const _data = {
        data,
        checked,
        indeterminate
      }
      this.$emit('handleCheckChange', _data)
    }
  }
}
</script>

<style lang="scss" scoped></style>
